<template>
  <div class="goodsInfo-container">
    <header class="header" ref="header">
      <div class="arrow-left" @click="$router.back()">
        <i class="iconfont icon-arrow-left"></i>
      </div>
      <div class="header_title">
        <span class="txt">商品</span>
      </div>
      <div class="three-dot">
        <i class="iconfont icon-three-dot"></i>
      </div>
    </header>
    <div class="main" ref="main">
       <div class="inner">
        <Carousel :carousels="currentGoods.pics"></Carousel>
        <div class="goods_detail">
          <div class="goods_price">
            ￥<span class="big_price">{{ currentGoods.price }}</span>.00
          </div>
          <div class="goods_title">
            <span class="txt">{{ currentGoods.title }}</span>
          </div>
        </div>
        <div class="count">
          <div class="count_left">
            数量&nbsp;
            <span class="surplus_count">仅剩{{ currentGoods.inventory_count - selectedCount }}件</span>
          </div>
          <div class="numBox">
            <NumBox :max="currentGoods.inventory_count" @getCount="getSelectedCount" />
          </div>
         </div>
         <div class="mui-card">
           <div class="mui-card-header">商品参数</div>
           <div class="mui-card-content">
             <div class="mui-card-content-inner">
               <p>库存情况: {{ currentGoods.inventory_count }} 件</p>
               <p>上架时间: {{ currentGoods.createTime | date-format }}</p>
             </div>
           </div>
         </div>
       </div>
    </div>
    <footer class="footer">
      <div class="icon_btn">
        <i class="iconfont icon-lianxikefu"></i>
        <span class="txt">联系客服</span>
      </div>
      <div class="icon_btn">
        <i class="iconfont icon-jindian"></i>
        <span class="txt">进店</span>
      </div>
      <div class="icon_btn" @click="$router.replace('/shopcart')">
        <i class="iconfont icon-cart"></i>
        <span class="txt">购物车</span>
        <transition name="moveY"
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <span class="add_num" v-show="addNum">+{{ selectedCount }}</span>
        </transition>
        <i class="cartNum">
          <span class="txt">{{ allTotalCount }}</span>
        </i>
      </div>
      <div class="icon_btn btn_group">
        <div class="btn add_shopCart">
          <span class="txt" @click="addToShopCart(currentGoods)">加入购物车</span>
        </div>
        <div class="btn order_buy">
          <span class="txt">立即购买</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
  import { mapState, mapActions, mapGetters } from 'vuex'
  import { MessageBox, Toast } from 'mint-ui'
  import Carousel from '../../components/Carousel/Carousel'
  import BScroll from 'better-scroll'
  import NumBox from '../../components/GoodsInfoNumBox/GoodsInfoNumBox'
  export default {
    data () {
      return {
        id: this.$route.params.id, // 将路由参数对象中的 id 挂载到 data中
        currentGoods: {}, // 获取到的商品的信息
        addNum: false, // 控制加入购物车之后的 +1 显示隐藏标识符
        selectedCount: 1 // 保存用户选中的商品数量, 默认, 认为用户买一个
      }
    },
    mounted () {
      this.setMainHeight()
      this.$store.dispatch('getGoods', () => {
        let goods = this.goods.filter(item => {
          return item.id === this.id
        })
        this.currentGoods  = goods[0]
        // 滚动
        this._initIScrollMain()
      })
    },
    computed: {
      ...mapState(['goods']),
      // 获取对应的 Getters 里的数据
      ...mapGetters(['allTotalCount'])
    },
    components: {
      Carousel,
      NumBox
    },
    methods: {
      setMainHeight () {
        const main = this.$refs.main
        const docH = document.documentElement.clientHeight
        main.style.height = docH - 50 + 'px'
      },
      _initIScrollMain () {
        let mainScroll = new BScroll('.main', {
          scrollY: true, // Y轴滚动
          scrollBar: true, // 滚动条
          bounce: false, // 禁用回弹
          probeType: 2
        })
        const header = this.$refs.header
        let arrow_left = header.children[0]
        let header_title_txt = header.children[1].children[0]
        let three_dot = header.children[2]
        let arrow_left_icon = arrow_left.children[0]
        let three_dot_icon = three_dot.children[0]
        let options = 0
        let ColorApl = 0
        mainScroll.on('scroll', ({x, y}) => {
          options = -(y / 50)
          ColorApl = 1 - (-(y / 50))
          if (y <= -50) {
            header.style.backgroundColor = `rgba(255, 255, 255, ${options})`
            arrow_left_icon.style.color = '#333'
            three_dot_icon.style.color = '#333'

            arrow_left.style.backgroundColor = 'transparent'
            three_dot.style.backgroundColor = 'transparent'
          } else if(y > -50) {
            if ((options * 10) === 5) {
              arrow_left.style.backgroundColor = 'transparent'
              three_dot.style.backgroundColor = 'transparent'

              arrow_left.style.color = '#333'
              three_dot.style.color = '#333'
            }

            header.style.backgroundColor = `rgba(255, 255, 255, ${options})`
            header_title_txt.style.color = `rgba(51, 51, 51, ${options})`
            if (y === 0) {
              options = 1
            }
            // 变浅
            arrow_left_icon.style.color = `rgba(255, 255, 255, ${options})`
            three_dot_icon.style.color = `rgba(255, 255, 255, ${options})`

            // 加深
            arrow_left.style.backgroundColor = `rgba(51, 51, 51, ${ColorApl})`
            three_dot.style.backgroundColor = `rgba(51, 51, 51, ${ColorApl})`
          }
        })
      },
      // 添加商品到购物车
      addToShopCart () {
        MessageBox.confirm('确定加入购物车吗?').then(
          action => {
            this.addNum = !this.addNum
            Toast('加入成功')
            // { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false }
            // 拼接一个要保存到 store 中的数组
            const goodsInfo = {
              id: this.id,
              count: this.selectedCount,
              price: this.currentGoods.price,
              selected: true
            }
            this.$store.dispatch('addToCartGoods', goodsInfo)
          },
          action => {
            Toast('取消加入')
          }
        )
      },
      beforeEnter (el) {
        el.style.transform = 'translateY(0)'
      },
      enter (el, done) {
        el.offsetWidth
        el.style.transform = 'translateY(-40px)'
        el.style.transition = 'all .5s ease'
        done()
      },
      afterEnter (el) {
        this.addNum = !this.addNum
      },
      getSelectedCount (count) {
        // 当子组件把 选中的数量传递给父组件的时候, 把选中的值保存到 data 上
        this.selectedCount = count
        // console.log(this.selectedCount)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  body
    margin 0
  .goodsInfo-container
    width 100%
    max-width 640px
    max-height 640px
    position relative
    .header
      height 44px
      position fixed
      top 0
      left 0
      right 0
      z-index 999
      bg(transparent)
      .header_title
        height 40px
        lh(40px)
        center-text()
        .txt
          color(transparent)
      .arrow-left, .three-dot
        size(30px, 30px)
        lh(32px)
        bg(#333)
        center-text()
        border-radius 50%
        position absolute
        top 50%
        transform translateY(-50%)
      .arrow-left
        left 10px
      .three-dot
        right 10px
      .icon-arrow-left, .icon-three-dot
        fz(26px)
        color(#fff)
    .main
      width 100%
      overflow hidden
      .inner
        width 100%
        .carousel
          width 100%
          height 375px
          span
            &.swiper-pagination-bullet-active
              background #f20
          img
            size(100%, 375px)
        .goods_detail
          width 100%
          height 110px
          overflow hidden
          margin-top 5px
          .goods_price
            fz(17px)
            color(#e4393c)
            border-box()
            height 42px
            padding 0 10px
            margin-top 5px
            font-weight bold
            .big_price
              fz(26px)
          .goods_title
            border-box()
            height 70px
            padding 0 10px
            overflow hidden
            .txt
              fz(17px)
              letter-spacing 2px
              font-weight 600
        .count
          height 40px
          margin-top 10px
          position relative
          .count_left
            fl()
            size(120px, 40px)
            lh(40px)
            fz(14px)
            color(#999)
            margin-left 10px
            .surplus_count
              color(#e4393c)
          .numBox
            fr()
            margin-right 20px
            margin-top 2px
    .footer
      height 50px
      position fixed
      left 0
      right 0
      bottom 0
      z-index 999
      .icon_btn
        size(14.133%, 50px)
        fl()
        bg(#fff)
        position relative
        .iconfont
          size(20px, 20px)
          fz(20px)
          display block
          margin 10px auto 0
          color(#999)
        .txt
          fz(10px)
          lh(20px)
          color(#999)
          center-text()
          display block
        .cartNum
          size(14px, 14px)
          bg(#f20)
          position absolute
          top 6px
          right 12px
          border-radius 50%
          display block
          .txt
            color(#fff)
            fz(10px)
            lh(12px)
        .add_num
          position absolute
          top 4px
          right 10px
          color(#f20)
          fz(16px)
          font-weight bold
          z-index 20
        &.btn_group
          width 57.6%
          .btn
            fl()
            size(50%, 50px)
            .txt
              fz(17px)
              lh(50px)
              auto-text()
              color(#fff)
            &.add_shopCart
              bg(linear-gradient(138deg,#ffa600,#ffb000 77%,#ffbc00))
            &.order_buy
              bg(linear-gradient(-41deg,#ff4f18,#ff2000 24%,#f10000))
</style>
